<template>
  <div class="system-menu-container">
    <div class="breadcrumb-box">
      <Breadcrumb />
    </div>

    <el-form :inline="true" :model="state.form" class="demo-form-inline" style="padding: 0 15px;">
      <el-form-item label="统计周期">
        <el-radio-group v-model="state.form.date" @input="changeType" class="ml-4">
          <el-radio label="1" size="small">日</el-radio>
          <el-radio label="2" size="small">月</el-radio>
          <el-radio label="3" size="small">季度</el-radio>
          <el-radio label="4" size="small">年</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="分析区间">
        <el-date-picker @change="changeDate" size="small" v-model="state.form.time" type="datetimerange"
          range-separator="至" start-placeholder="起始时间" end-placeholder="结束时间" format="YYYY-MM-DD"
          value-format="YYYY-MM-DD" />
      </el-form-item>


      <el-form-item label="">
        <el-button type="primary" size="small">导出</el-button>
      </el-form-item>
    </el-form>

    <div class="page-main">
      <el-card shadow="hover">
        <template #header>主刀医生工作量统计</template>


        <el-row :gutter="30">
          <el-col :span="24">
            <div v-for="(item, key) in state.data" :key="key">
              <el-descriptions v-if="item.list && item.list.length > 0" class="margin-top" :title="item.part" :column="4" size="large" border>

                <el-descriptions-item v-for="(i, k) in item.list">
                  <template #label>
                    <div class="cell-item">
                      {{ i.name }}
                    </div>
                  </template>
                  {{ i.number }}
                </el-descriptions-item>

              </el-descriptions>
            </div>

          </el-col>
        </el-row>
      </el-card>
    </div>


  </div>
</template>

<script setup name="dataStatistics-workload-index">
import { storeToRefs } from 'pinia';
import { useRoutesList } from '/@/stores/routesList';
import { dashbordApi } from '/@/api/dashbord/dashbord';
import { getPast15Days, getPastMonth, getToday, getCurrentQuarter, getCurrentYear } from "/@/utils/timeUtil";
import { ElMessage } from "element-plus";
// 引入组件
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));
const data = ref(
  [
    {
      part: "超声科",
      list: [{ name: "主刀医生1", number: 10 }, { name: "主刀医生2", number: 10 }, { name: "主刀医生3", number: 10 }, {
        name: "主刀医生4",
        number: 10
      }]
    },
    {
      part: "耳鼻喉科",
      list: [{ name: "主刀医生1", number: 10 }, { name: "主刀医生2", number: 10 }, { name: "主刀医生3", number: 10 }, {
        name: "主刀医生4",
        number: 10
      }]
    },
    {
      part: "内科",
      list: [{ name: "主刀医生1", number: 10 }, { name: "主刀医生2", number: 10 }, { name: "主刀医生3", number: 10 }, {
        name: "主刀医生4",
        number: 10
      }]
    },
    {
      part: "外科",
      list: [{ name: "主刀医生1", number: 10 }, { name: "主刀医生2", number: 10 }, { name: "主刀医生3", number: 10 }, {
        name: "主刀医生4",
        number: 10
      }]
    },
    {
      part: "妇产科",
      list: [{ name: "主刀医生1", number: 10 }, { name: "主刀医生2", number: 10 }, { name: "主刀医生3", number: 10 }, {
        name: "主刀医生4",
        number: 10
      }]
    },
    {
      part: "儿科",
      list: [{ name: "主刀医生1", number: 10 }, { name: "主刀医生2", number: 10 }, { name: "主刀医生3", number: 10 }, {
        name: "主刀医生4",
        number: 10
      }]
    },
    {
      part: "眼科",
      list: [{ name: "主刀医生1", number: 10 }, { name: "主刀医生2", number: 10 }, { name: "主刀医生3", number: 10 }, {
        name: "主刀医生4",
        number: 10
      }]
    },
    {
      part: "口腔科",
      list: [{ name: "主刀医生1", number: 10 }, { name: "主刀医生2", number: 10 }, { name: "主刀医生3", number: 10 }, {
        name: "主刀医生4",
        number: 10
      }]
    },
    {
      part: "骨科",
      list: [{ name: "主刀医生1", number: 10 }, { name: "主刀医生2", number: 10 }, { name: "主刀医生3", number: 10 }, {
        name: "主刀医生4",
        number: 10
      }]
    },
    {
      part: "肿瘤科",
      list: [{ name: "主刀医生1", number: 10 }, { name: "主刀医生2", number: 10 }, { name: "主刀医生3", number: 10 }, {
        name: "主刀医生4",
        number: 10
      }]
    },
    {
      part: "皮肤科",
      list: [{ name: "主刀医生1", number: 10 }, { name: "主刀医生2", number: 10 }, { name: "主刀医生3", number: 10 }, {
        name: "主刀医生4",
        number: 10
      }]
    },
    {
      part: "精神科",
      list: [{ name: "主刀医生1", number: 10 }, { name: "主刀医生2", number: 10 }, { name: "主刀医生3", number: 10 }, {
        name: "主刀医生4",
        number: 10
      }]
    },
    {
      part: "中医科",
      list: [{ name: "主刀医生1", number: 10 }, { name: "主刀医生2", number: 10 }, { name: "主刀医生3", number: 10 }, {
        name: "主刀医生4",
        number: 10
      }]
    },
    {
      part: "康复科",
      list: [{ name: "主刀医生1", number: 10 }, { name: "主刀医生2", number: 10 }, { name: "主刀医生3", number: 10 }, {
        name: "主刀医生4",
        number: 10
      }]
    },
    {
      part: "其他科室",
      list: [{ name: "主刀医生1", number: 10 }, { name: "主刀医生2", number: 10 }, { name: "主刀医生3", number: 10 }, {
        name: "主刀医生4",
        number: 10
      }]
    },
  ]
);
// 定义变量内容
const stores = useRoutesList();
const state = reactive({
  data: [],
  form: {
    date: '',
    time: []
  },
  param: {
    start_time: '',
    end_time: '',
  }
});


const changeDate = (param) => {
  console.log(param)
 

  if(param){
    state.param.start_time = param[0]
    state.param.end_time = param[1]
    getData(state.param)
  }else{
  
  }
  state.form.date = ''
}

const changeType = (param) => {
  let type = param.target.value
  if (type == 1) {
    state.param.start_time = getToday()
    state.param.end_time = getToday()
    state.form.time = [getToday(), getToday()]

  }
  if (type == 2) {
    state.param.start_time = getPastMonth()['startDate']
    state.param.end_time = getPastMonth()['endDate']
    state.form.time = [getPastMonth()['startDate'], getPastMonth()['endDate']]
  }
  if (type == 3) {
    state.param.start_time = getCurrentQuarter()['startDate']
    state.param.end_time = getCurrentQuarter()['endDate']
    state.form.time = [getCurrentQuarter()['startDate'], getCurrentQuarter()['endDate']]
  }
  if (type == 4) {
    state.param.start_time = getCurrentYear()['startDate']
    state.param.end_time = getCurrentYear()['endDate']
    state.form.time = [getCurrentYear()['startDate'], getCurrentYear()['endDate']]
  }
  getData(state.param)
}
const getData = (param) => {
  console.log("param===", param)
  dashbordApi().getWorkload(param).then((res) => {
    var data = [];
    for (let key in res.data.list) {
      var obj = {}
      obj.part = key
      obj.list = []
      res.data.list[key].forEach((item) => {
        obj.list.push({ name: item.name, number: item.operationCount })
      })

      data.push(obj)
    }
    ElMessage.success('获取数据成功');


    state.data = data

  })
}

// 页面加载时
onMounted(() => {
  state.param = {
    start_time: getPast15Days()['startDate'],
    end_time: getPast15Days()['endDate'],
  }
  state.form.time = [getPast15Days()['startDate'], getPast15Days()['endDate']]
  getData(state.param)
});
</script>


<style lang="scss" scoped>
:deep() .el-descriptions__title {
  width: 100%;
  text-align: center;
  font-size: 30px !important;
  padding-top: 15px;
}
</style>
